html body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.container {
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ebecf0;
}
.container .first-line {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .first-line .Aa {
  width: 240px;
  height: 240px;
  display: flex;
  margin-right: 80px;
  flex-direction: column;
  justify-content: center;
  border-radius: 40px;
  background: #ebecf0;
  box-shadow: 24px 24px 48px #b3b3b6, -24px -24px 48px #ffffff;
}
.container .first-line .Aa .text {
  text-align: center;
  font-size: 144px;
  background-image: -webkit-linear-gradient(right, #31BFE4, #1858F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container .first-line .right {
  display: flex;
  flex-direction: column;
}
.container .first-line .right .line1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .first-line .right .line1 .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 371px;
  height: 94px;
  margin-right: 80px;
  border-radius: 47px;
  background: #ebecf0;
  box-shadow: 12px 12px 24px #b3b3b6, -12px -6px 24px #ffffff;
}
.container .first-line .right .line1 .button .text {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
}
.container .first-line .right .line1 .arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94px;
  height: 94px;
  margin-right: 80px;
  border-radius: 15px;
  background: #ebecf0;
  box-shadow: 9px 9px 19px #b3b3b6, -9px -9px 19px #ffffff;
}
.container .first-line .right .line1 .arrow .iconfont {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
}
.container .first-line .right .line1 .close {
  position: relative;
}
.container .first-line .right .line1 .close .bg {
  width: 116px;
  height: 61px;
  box-sizing: border-box;
  border: 6px solid rgba(255, 255, 255, 0.16);
  border-radius: 31px;
  box-shadow: -30px -30px 60px 0 #fffbff, 30px 30px 60px 0 #a6abbd;
}
.container .first-line .right .line1 .close .handle {
  position: absolute;
  top: -7px;
  left: -10px;
  width: 75px;
  height: 75px;
  box-sizing: border-box;
  border-radius: 37.5px;
  background-color: #fff;
  border: 1px solid #DEE1EB;
  box-shadow: 0 2px 2px 0 #596278;
}
.container .first-line .right .line2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 52px;
}
.container .first-line .right .line2 .input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 371px;
  height: 94px;
  margin-right: 80px;
  border-radius: 47px;
  background-color: #EBECF0;
  box-shadow: inset -5px -5px 10px 0 #fffbff, inset 5px 5px 10px 0 #a6abbd;
}
.container .first-line .right .line2 .input .text {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
}
.container .first-line .right .line2 .pressed {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94px;
  height: 94px;
  margin-right: 80px;
  border-radius: 47px;
  background: linear-gradient(145deg, #fbfdff, #d4d4d8);
  box-shadow: -10px -10px 20px 0 #fffbff, 10px 10px 20px 0 #a6abbd;
}
.container .first-line .right .line2 .pressed .inner {
  width: 31px;
  height: 31px;
  border-radius: 31px;
  border: 5px solid #8A92A5;
}
.container .first-line .right .line2 .unpressed {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 94px;
  height: 94px;
  border-radius: 47px;
  margin-right: 80px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: linear-gradient(145deg, #d4d4d8, #fbfdff);
  box-shadow: inset -5px -5px 20px 0 #fffbff, inset 5px 5px 20px 0 #a6abbd;
}
.container .first-line .right .line2 .unpressed .inner {
  width: 33px;
  height: 33px;
  border-radius: 33px;
  background-color: #8A92A5;
}
.container .first-line .right .line2 .open {
  position: relative;
}
.container .first-line .right .line2 .open .bg {
  width: 116px;
  height: 61px;
  box-sizing: border-box;
  border-radius: 31px;
  background-color: #1654F0;
  box-shadow: -30px -30px 60px 0 #fffbff, 30px 30px 60px 0 #a6abbd;
}
.container .first-line .right .line2 .open .handle {
  position: absolute;
  top: -7px;
  right: -10px;
  width: 75px;
  height: 75px;
  box-sizing: border-box;
  border-radius: 37.5px;
  background-color: #fff;
  border: 1px solid #DEE1EB;
  box-shadow: 0 2px 2px 0 #596278;
}
.container .second-line {
  margin-top: 52px;
  display: flex;
}
.container .second-line .left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container .second-line .left .top {
  display: flex;
}
.container .second-line .left .top .share {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 80px;
  width: 245px;
  height: 94px;
  border-radius: 47px;
  box-shadow: -10px -10px 20px 0 #fffbff, 10px 10px 20px 0 #a6abbd;
}
.container .second-line .left .top .share .text {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
  margin-right: 10px;
}
.container .second-line .left .top .share .iconfont {
  color: #6D7587;
  font-size: 36px;
}
.container .second-line .left .top .dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 371px;
  height: 94px;
  border-radius: 47px;
  box-shadow: -10px -10px 20px 0 #fffbff, 10px 10px 20px 0 #a6abbd;
}
.container .second-line .left .top .dropdown .text {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
  margin-right: 30px;
}
.container .second-line .left .top .dropdown .iconfont {
  color: #6D7587;
  font-size: 36px;
}
.container .second-line .left .middle {
  display: flex;
  margin-top: 52px;
}
.container .second-line .left .middle .label {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 80px;
  width: 245px;
  height: 94px;
  border-radius: 47px;
  box-shadow: -10px -10px 20px 0 #fffbff, 10px 10px 20px 0 #a6abbd;
}
.container .second-line .left .middle .label .text {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
  margin-left: 10px;
}
.container .second-line .left .middle .label .iconfont {
  color: #6D7587;
  font-size: 36px;
}
.container .second-line .left .middle .adduser {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 371px;
  height: 94px;
  border-radius: 47px;
  box-shadow: -10px -10px 20px 0 #fffbff, 10px 10px 20px 0 #a6abbd;
}
.container .second-line .left .middle .adduser .text {
  font-size: 36px;
  font-weight: 200;
  color: #6D7587;
  margin-left: 10px;
}
.container .second-line .left .middle .adduser .iconfont {
  color: #6D7587;
  font-size: 36px;
}
.container .second-line .left .bottom {
  margin-top: 52px;
  position: relative;
}
.container .second-line .left .bottom .search {
  width: 687px;
  height: 94px;
  border-radius: 47px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset -5px -5px 20px 0 #fffbff, inset 5px 5px 20px 0 #a6abbd;
  padding-left: 80px;
  font-size: 36px;
  color: #6D7587;
}
.container .second-line .left .bottom .search::placeholder {
  font-size: 36px;
  color: #6D7587;
}
.container .second-line .left .bottom .iconfont {
  font-size: 36px;
  position: absolute;
  top: 27px;
  left: 30px;
  color: #6D7587;
}
.container .second-line .right {
  display: flex;
  margin-left: 80px;
  align-items: flex-end;
}
.container .second-line .right .pillar1 {
  height: 268px;
}
.container .second-line .right .pillar2 {
  height: 350px;
}
.container .second-line .right .pillar3 {
  height: 190px;
}
.container .second-line .right .pillar4 {
  height: 388px;
}
.container .second-line .right .pillar5 {
  height: 271px;
}
.container .second-line .right .pillar5 {
  margin-right: 0 !important;
}
.container .second-line .right .pillar {
  position: relative;
  background: linear-gradient(145deg, #fbfdff, #d4d4d8);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset -5px -5px 20px 0 #fffbff, inset 5px 5px 20px 0 #a6abbd;
  width: 59px;
  margin-right: 42px;
  border-radius: 30px;
}
.container .second-line .right .pillar .fill {
  border-radius: 30px;
  position: absolute;
  width: 59px;
  background-color: #1654F0;
  left: 0;
  bottom: 0;
}
.container .second-line .right .pillar .fill1 {
  height: 165px;
}
.container .second-line .right .pillar .fill2 {
  height: 283px;
}
.container .second-line .right .pillar .fill3 {
  height: 92px;
}
.container .second-line .right .pillar .fill4 {
  height: 323px;
}
.container .second-line .right .pillar .fill5 {
  height: 188px;
}
